import './index.css'
import { Button, Flex, Avatar, Space, Drawer, Empty,Input, Select, FloatButton,Tooltip,ConfigProvider   } from 'antd';
import React, { useState } from 'react';
import { PictureOutlined, SearchOutlined, LineChartOutlined, VideoCameraOutlined, UserSwitchOutlined, DesktopOutlined, BorderOuterOutlined, MutedOutlined, DatabaseOutlined, FileAddOutlined } from '@ant-design/icons';
let Application = () => {
  const [currentId4, setCurrentId4] = useState(1)
  const options4 = [
    { label: "发现", id: 1 },
    { label: "你的应用", id: 2 },
    ]
    const changeId4 = (id) => {
        setCurrentId4(id)
        }
    return (
        <div>
                <Input prefix={<SearchOutlined />} style={{ width: '90%', height: '40px', margin: '20px 20px 10px 20px' }} placeholder="搜索图片" />
                

                 {options4.map((item) => {
                          return (
                              <div key={item.id} onClick={() => changeId4(item.id)} className={item.id == currentId4 ? "active" : ""}>
                                      <div className='fxndyy' style={{float:'left'}}>{item.label}</div>
                            </div>
          )
                 })}
                <div style={{width:'100%',height:'525px',overflowX:'hidden',overflowY:'scroll'}}>
                  <div style={{ display: currentId4 == 1 ? "block" : "none" }}>
                 <div style={{color:'#fff',margin:'20px'}}>
                      <b>来自Canva的更多内容</b>
                      <p style={{fontSize:'12px'}}>访问更多内容,创建绝佳设计</p>
                    </div>
                    <div style={{ width: '100%', color: '#fff',height:'380px' }}>
                      <div style={{ width: '80px',height:'100px', color: '#fff',float:'left',margin:'10px 25px 10px 20px' }}>
                      <div style={{ width: '80px', height: '80px', borderRadius: '5px', border: '1px solid #ccc',lineHeight:'80px',textAlign:'center' }}><LineChartOutlined /></div>
                      <p style={{width:'80px',textAlign:'center'}}>图表</p>
                      </div>
                       <div style={{ width: '80px',height:'100px', color: '#fff',float:'left',margin:'10px 20px 10px 15px' }}>
                      <div style={{ width: '80px', height: '80px', borderRadius: '5px', border: '1px solid #ccc',lineHeight:'80px',textAlign:'center' }}><PictureOutlined /></div>
                      <p style={{width:'80px',textAlign:'center'}}>图片</p>
                    </div>
                     <div style={{ width: '80px',height:'100px', color: '#fff',float:'left',margin:'10px 20px 10px 20px' }}>
                      <div style={{ width: '80px', height: '80px', borderRadius: '5px', border: '1px solid #ccc',lineHeight:'80px',textAlign:'center' }}><FileAddOutlined /></div>
                      <p style={{width:'80px',textAlign:'center'}}>批量创建</p>
                      </div>
                                            <div style={{ width: '80px',height:'100px', color: '#fff',float:'left',margin:'10px 25px 10px 20px' }}>
                      <div style={{ width: '80px', height: '80px', borderRadius: '5px', border: '1px solid #ccc',lineHeight:'80px',textAlign:'center' }}><DatabaseOutlined /></div>
                      <p style={{width:'80px',textAlign:'center'}}>自动填充</p>
                      </div>
                       <div style={{ width: '80px',height:'100px', color: '#fff',float:'left',margin:'10px 20px 10px 15px' }}>
                      <div style={{ width: '80px', height: '80px', borderRadius: '5px', border: '1px solid #ccc',lineHeight:'80px',textAlign:'center' }}><MutedOutlined /></div>
                      <p style={{width:'80px',textAlign:'center'}}>音频</p>
                    </div>
                     <div style={{ width: '80px',height:'100px', color: '#fff',float:'left',margin:'10px 20px 10px 20px' }}>
                      <div style={{ width: '80px', height: '80px', borderRadius: '5px', border: '1px solid #ccc',lineHeight:'80px',textAlign:'center' }}><BorderOuterOutlined /></div>
                     <p style={{width:'80px',textAlign:'center'}}>背景</p>
                      </div>
                                            <div style={{ width: '80px',height:'100px', color: '#fff',float:'left',margin:'10px 25px 10px 20px' }}>
                      <div style={{ width: '80px', height: '80px', borderRadius: '5px', border: '1px solid #ccc',lineHeight:'80px',textAlign:'center' }}><DesktopOutlined /></div>
                      <p style={{width:'80px',textAlign:'center'}}>视频</p>
                      </div>
                       <div style={{ width: '80px',height:'100px', color: '#fff',float:'left',margin:'10px 20px 10px 15px' }}>
                      <div style={{ width: '80px', height: '80px', borderRadius: '5px', border: '1px solid #ccc',lineHeight:'80px',textAlign:'center' }}><UserSwitchOutlined /></div>
                      <p style={{width:'80px',textAlign:'center'}}>翻译</p>
                    </div>
                     <div style={{ width: '80px',height:'100px', color: '#fff',float:'left',margin:'10px 20px 10px 20px' }}>
                      <div style={{ width: '80px', height: '80px', borderRadius: '5px', border: '1px solid #ccc',lineHeight:'80px',textAlign:'center' }}><VideoCameraOutlined /></div>
                      <p style={{width:'80px',textAlign:'center'}}>魔力素材</p>
                    </div>
            </div>
            <div style={{ width: '100%', marginTop: '10px',height:'140px' }}>
            <p style={{color:'#fff',marginLeft:'20px',fontWeight:'bold'}}>热门</p>
             <div style={{ width: '80px',height:'100px', color:'#fff',float:'left',margin:'10px 25px 10px 20px' }}>
                        <div style={{ width: '80px', height: '80px', borderRadius: '5px', lineHeight: '80px', textAlign: 'center' }}>
                        <img style={{width:'99%',height:'99%',borderRadius:'5px'}}src='https://static.canva.cn/web/images/af92ddf5a5fcb27a540d62c41a065100.png' />
                        </div>
                        <p style={{width:'80px',textAlign:'center',fontSize:'12px' }}>二维码</p>
                      </div>
            </div>
                    <div style={{width:'100%',marginTop:'10px',height:'140px'}}>
                    <p style={{color:'#fff',marginLeft:'20px',fontWeight:'bold'}}>发掘以下来源的内容</p>
                     <div style={{ width: '80px',height:'100px', color: '#fff',float:'left',margin:'10px 25px 10px 20px' }}>
                        <div style={{ width: '80px', height: '80px', borderRadius: '5px', lineHeight: '80px', textAlign: 'center' }}>
                        <img style={{width:'99%',height:'99%',borderRadius:'5px'}} src='https://apps.canva-apps.cn/integrations/icons/emoji_icon.png' />
                        </div>
                        <p style={{width:'80px',textAlign:'center',fontSize:'12px' }}>Emoji</p>
                      </div>
                      <div style={{ width: '80px',height:'100px', color: '#fff',float:'left',margin:'10px 20px 10px 15px' }}>
                        <div style={{ width: '80px', height: '80px', borderRadius: '5px', lineHeight: '80px', textAlign: 'center' }}>
                        <img style={{width:'99%',height:'99%',borderRadius:'5px'}} src='https://apps.canva-apps.cn/integrations/icons/pexels_icon.png' />
                        </div>
                        <p style={{width:'80px',textAlign:'center',fontSize:'12px' }}>Pexels</p>
                      </div>
                      <div style={{ width: '80px',height:'100px', color: '#fff',float:'left',margin:'10px 20px 10px 20px' }}>
                        <div style={{ width: '80px', height: '80px', borderRadius: '5px', lineHeight: '80px', textAlign: 'center' }}>
                        <img style={{width:'99%',height:'99%',borderRadius:'5px'}} src='https://apps.canva-apps.cn/integrations/icons/pixabay_icon.png' />
                        </div>
                        <p style={{width:'80px',textAlign:'center',fontSize:'12px' }}>Pixabay</p>
                      </div>
                    </div>
                     <div style={{width:'100%',marginTop:'10px',height:'140px'}}>
                    <p style={{color:'#fff',marginLeft:'20px',fontWeight:'bold'}}>导入媒体文件</p>
                     <div style={{ width: '80px',height:'100px', color: '#fff',float:'left',margin:'10px 25px 10px 20px' }}>
                        <div style={{ width: '80px', height: '80px', borderRadius: '5px', lineHeight: '80px', textAlign: 'center' }}>
                        <img style={{width:'99%',height:'99%',borderRadius:'5px'}} src='https://apps.canva-apps.cn/BAC75GoEy58/UAD3T5rzM7Q/AAENqAQhld0/1/AAENqAQhld0_RdIxGk/listItemThumbnail_medium/b83091fb-e5fe-4570-8ea9-bbd0bf58a5ba.png' />
                        </div>
                        <p style={{width:'80px',textAlign:'center',fontSize:'12px' }}>Baidu Net Drive</p>
                      </div>
                      <div style={{ width: '80px',height:'100px', color: '#fff',float:'left',margin:'10px 20px 10px 15px' }}>
                        <div style={{ width: '80px', height: '80px', borderRadius: '5px', lineHeight: '80px', textAlign: 'center' }}>
                        <img style={{width:'99%',height:'99%',borderRadius:'5px'}} src='https://apps.canva-apps.cn/integrations/icons/embed_icon.png' />
                        </div>
                        <p style={{width:'80px',textAlign:'center',fontSize:'12px' }}>Embed</p>
                      </div>
                      <div style={{ width: '80px',height:'100px', color: '#fff',float:'left',margin:'10px 20px 10px 20px' }}>
                        <div style={{ width: '80px', height: '80px', borderRadius: '5px', lineHeight: '80px', textAlign: 'center' }}>
                        <img style={{width:'99%',height:'99%',borderRadius:'5px'}} src='https://apps.canva-apps.cn/BAFANZ9vdu8/UAFANZvhCW8/AAFANYWpEIA/1/AAFANYWpEIA_0DXDuo/listItemThumbnail_medium/d2bff203-34ea-48ec-824c-a29e6a704b8e.png' />
                        </div>
                        <p style={{width:'80px',textAlign:'center',fontSize:'12px' }}>IconScout</p>
                      </div>
            </div>
             <div style={{ width: '100%', marginTop: '10px',height:'140px' }}>
            <p style={{color:'#fff',marginLeft:'20px',fontWeight:'bold'}}>热门</p>
             <div style={{ width: '80px',height:'100px', color:'#fff',float:'left',margin:'10px 25px 10px 20px' }}>
                        <div style={{ width: '80px', height: '80px', borderRadius: '5px', lineHeight: '80px', textAlign: 'center' }}>
                        <img style={{width:'99%',height:'99%',borderRadius:'5px'}}src='https://apps.canva-apps.com/integrations/icons/shape_guided_inpainting_icon.png' />
                        </div>
                        <p style={{width:'80px',textAlign:'center',fontSize:'12px' }}>魔力特效</p>
                      </div>
            </div>
            
                  </div>
                  <div style={{ display: currentId4 == 2 ? "block" : "none" }}>
                  <Empty />
                  </div>
                  
                </div>
        </div>
)
}

export default Application